<template>
  <!--  <h1>USER</h1>-->

  <div id="OrderManage">

    <el-table :data="orders" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="userId" label="用户编号" width="180"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="180"></el-table-column>
      <el-table-column prop="orderState" label="订单状态" width="180">
        <template slot-scope="scope">{{ judgeState(scope.row.orderState) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="总价格" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="isView(scope.row)">查看</el-button>
          <el-button type="text" @click="isCancel(scope.row)">取消</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog title="订单详情界面" :visible.sync="dialogFormVisible">

      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="orderId" label="订单编号" width="90"></el-table-column>
        <el-table-column prop="productId" label="产品编号" width="90"></el-table-column>
        <el-table-column prop="productName" label="产品名" width="90"></el-table-column>
        <el-table-column prop="quantity" label="产品数量" width="90"></el-table-column>
        <el-table-column prop="remark" label="产品备注" width="180"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
import {deleteUser, getUserList, updateUser} from "@/API/AdminAPI";
import axios, {isCancel} from "axios";
import Message from "@/utils/message";
import {getOrderDetail, getOrderList} from "@/API/OrderAPI";

const apiUrl = "http://localhost:8081";
export default {
  name: "OrderManager",
  data() {
    return {
      orders: [],
      orderList: [],
      dialogFormVisible: false,
      seeOrder: {
        productId: "",
        productName:"",
        orderId: "",
        quantity: "",
        remark: "",
      },
      value: '',
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      total: 0, // 数据总条数

    };
  },
  async mounted() {
    try {
      let result = await getOrderList();
      this.orders = result.data;
      console.log(this.orders);
      Message.success(this, "订单信息加载成功。");
    } catch (error) {
      Message.error(this, "订单信息加载失败。");
      throw error;
    }
  },
  methods: {
    isCancel(orderState){
      if(orderState !== 0){
        Message.error(this,"该订单状态不可取消！");
      }else{
        // 调用取消订单接口
      }
    },
    judgeState(orderState) {
      switch (orderState) {
        case 0:
          return "未支付";
        case 1:
          return "已支付";
        case 2:
          return "已取消";
        case 3:
          return "异常";
        default:
          return "无效";
      }
    },
    async isView(row) {
      this.dialogFormVisible = true;
      try {
        let result = await getOrderDetail(row.orderId);
        this.orderList = result.data;
        console.log(this.orderList);
        Message.success(this, "订单详情加载成功。");
      } catch (error) {
        Message.error(this, "订单详情加载失败。");
        throw error;
      }
    },
  },
};
</script>

<style scoped>

</style>

<style>
.my-label {
  background: #E1F3D8;
}

.my-content {
  background: #FDE2E2;
}
</style>